<template>
  <view class="x-customer-service">
    <view v-if="detail.templateType === 14" class="card-type" :style="{'margin-bottom': `${styles.marginBottom || 0}rpx`, 'background': contentStyle.backgroundColor}">
      <template v-if="detail.componentContentList[0]">
        <view class="content">
          <view class="icon-box">
            <x-image :src="detail.componentContentList[0].imgUrl" />
          </view>
          <view class="desc-box">
            <h1 v-if="detail.componentContentList[0].title" class="title" :style="{'color': contentStyle.titleColor,'font-size': `${contentStyle.titleSize}px`,'font-weight': contentStyle.titleWeight }">{{ detail.componentContentList[0].title }}</h1>
            <view v-if="detail.componentContentList[0].remark" class="desc" :style="{'color': contentStyle.descColor,'font-size': `${contentStyle.descSize}px`,'font-weight': contentStyle.descWeight }">{{ detail.componentContentList[0].remark }}</view>
          </view>
          <x-button
            v-if="storeInfo && shareData.replyStatus === 1"
            transparent
            open-type="contact"
            :session-from="sessionFrom"
            :sendMessageTitle="shareData.cardKeywords"
            :send-message-img="shareData.cardUrl"
            :show-message-card="showMessageCard"
            :businessId="storeInfo.businessId"
            styles="border: none!important;background:#ffffff;"
          >
            <view
              class="btn"
              :style="{
                'color': contentStyle.buttonColor,
                'font-size': `${contentStyle.buttonFontSize}px`,
                'font-weight': contentStyle.buttonFontWeight,
                'background': contentStyle.buttonBackgroundColor
            }">
              {{ detail.componentContentList[0].buttonDesc }}
            </view>
          </x-button>
          <x-button
            v-else
            transparent
            open-type="contact"
            :session-from="sessionFrom"
            :businessId="storeInfo.businessId"
            styles="border: none!important;background:#ffffff;"
          >
            <view
              class="btn"
              :style="{
                'color': contentStyle.buttonColor,
                'font-size': `${contentStyle.buttonFontSize}px`,
                'font-weight': contentStyle.buttonFontWeight,
                'background': contentStyle.buttonBackgroundColor
            }">
              {{ detail.componentContentList[0].buttonDesc }}
            </view>
          </x-button>
        </view>
      </template>
    </view>
    <view v-else class="fixed-type">
      <x-button
        v-if="storeInfo"
        transparent
        open-type="contact"
        :session-from="sessionFrom"
        :sendMessageTitle="shareData.cardKeywords"
        :send-message-img="shareData.cardUrl"
        :show-message-card="showMessageCard"
        :businessId="storeInfo.businessId"
        styles="border: none!important;background:#ffffff;"
      >
        <view class="icon">
          <x-image :src="detail.componentContentList[0].imgUrl" />
        </view>
      </x-button>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XButton from '@/components/x-button';
import config from '@/config';

export default {
  name: 'XCustomerService',
  components: {
    XImage,
    XButton
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    toRem: {
      type: Boolean,
      default: false
    },
    storeId: {
      type: String,
      default: ''
    },
    source: {
      type: String,
      default: ''
    },
    pageId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      sessionFrom: null,
      storeInfo: null,
      shareData: {}
    };
  },
  computed: {
    // 模块样式
    styles() {
      return this.detail.componentStyle || {};
    },

    contentStyle() {
      return this.detail && this.detail.componentContentList[0] ? this.detail.componentContentList[0].contentStyle || {} : {};
    },

    showMessageCard() {
      return this.shareData.replyStatus === 1;
    }
  },
  watch: {},
  async created() {
    await this.getStoreBusinessId();
    this.getConfigData();
  },
  methods: {
    async getStoreBusinessId() {
      const params = {
        storeId: this.storeId
      };
      await this.$http({
        login: true,
        url: '/account/store/base/info',
        method: 'get',
        report: true,
        data: params
      }).then(res => {
        console.log(res);
        this.storeInfo = res.data;
      }).catch(err => {
        console.log(err);
      });
    },
    getConfigData() {
      this.$http({
        url: '/account/consulter/iu/app/detail',
        report: true,
        alarm: true,
        data: {
          storeId: this.storeId
        }
      }).then(res => {
        this.shareData = res.data || {};
        this.sessionFrom = JSON.stringify({
          source: config.appName,
          from: this.source,
          note: '客服咨询组件',
          storeId: this.storeId,
          pageId: this.pageId,
          title: this.title
        });
        if (this.source === 'home') {
          this.sessionFrom = `【首页】页面标题：${this.title}；页面ID：${this.pageId}`;
        } else if (this.source === 'decorate') {
          if (this.storeId) {
            this.sessionFrom = `【店铺首页】店铺名称：${this.storeInfo.storeName}；店铺ID：${this.pageId}`;
          }
        } else {
          this.sessionFrom = `【微页面】页面标题：${this.title}；页面ID：${this.pageId}`;
        }
      });
    }
  }
};
</script>

<style lang="scss">
  .x-customer-service {
    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 30px;
      word-break: break-all;

      .icon-box{
        width: 80px;
        height: 80px;
        margin-right: 20px;
        overflow: hidden;
        border-radius: 6px;
        .el-image{
          width: 100%;
          height: 100%;
        }
      }

      .desc-box{
        flex: 1;
        .title {
          line-height: 1.375;
        }

        .desc {
          margin: 4px 0 0;
          line-height: 1.375;
        }
      }

      .btn{
        border: none;
        padding: 4px 16px;
        border-radius: 4px;
      }
    }

    .fixed-type{
      z-index: 99;
      position: fixed;
      top: 60vh;
      right: 0;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      background: #FFFFFF;
      box-shadow: 0px -5px 5px rgba(186, 186, 186, 0.2), 0px 5px 5px rgba(217, 217, 217, 0.2);
      .icon{
        width: 100px;
        height: 100px;
      }
    }
  }
</style>
